{% load i18n static %}
{% load common %}
{% autoescape off %}
<div id="{{ model_name }}_edit_form" style="padding: 10px;height: 470px;width: 1000px;">
  <form class="layui-form data-form" action="" method="post" >
  <div class="base-setting">
    <input type="hidden" id="id_model_pk" name="pk" value="{{ object_id }}"/>
    {% csrf_token %}
    {% with adminform.form as f %}
    <table cellpadding="3" style="margin:0px 10px 0px 10px; position:relative;"><tbody>
    <tr><td>
      <div class="layui-form-item">
        {% layui_inline f.employee %}
        {% layui_inline f.shift %}
      </div>    
    </td></tr>
    <tr><td>
      <div class="layui-form-item">
        {% layui_inline f.start_date %}
        {% layui_inline f.end_date %}
      </div>  
    </td></tr>
    <tr><td>
      <div class="layui-form-item">
        {% layui_inline f.alias %}
        {% layui_inline f.auto_shift %}
      </div> 
    </td></tr>
    <tr><td>
      <div class="layui-form-item">
        {% layui_inline f.cycle_unit %}
        {% layui_inline f.shift_cycle %}
      </div> 
    </td></tr>
    <tr><td>
      <div class="layui-form-item">
        {% layui_inline f.shift_cover %}
        {% layui_inline f.schedule_cover %}
      </div> 
    </td></tr>
    <tr><td>
      <div id="id_weekend_div">
        <div class="layui-form-item">
          {% layui_inline f.work_weekend %}
          {% layui_inline f.weekend_type %}
        </div>
      </div>
    </td></tr>
    <tr><td>
      <div class="layui-form-item">
        {% layui_inline f.work_day_off %}
        {% layui_inline f.day_off_type %}
      </div>
    </td></tr>
    <tr>
      <td><table style="margin:0px 10px 0px 10px; position:relative;"><tbody>
        <tr class="displayN">
          <td>{{ f.weekend }}</td>
          <td><input name="days" type="hidden" class="days" value=""/></td>
        </tr>
        <tr>
          <td width="450px">
          <div class="external-events" style="height: 320px;">
            <div class="event-title">{% trans 'time_interval' %}</div>
            <div style="padding: 3px 0 3px 0;border-bottom: 1px solid #a4a9aa">
              <input type="text" id="time-interval-name">
              <span class="action_Search">&nbsp;</span>
              <a id="id_query_tb" href="javascript:void(0);" class="Link_blue1">{% trans 'search' %}</a>
            </div>
            <div id="time-interval-div">
              <table id="time-interval-list" lay-filter="time-interval-list"></table>
            </div>
          </div>
          </td>
          <td width="20"></td>
          <td colspan="4">
            <div style="border: 1px solid #d5d8d2;height: 320px;">
              <div style="width: 500px;height: 295px;margin-top: 5px; overflow: auto;">
                <div style="border-bottom: 1px dotted #cccccc;height: 20px;"></div>
                <table class="shift_management"><tbody><tr>
                </tr></tbody></table>
              </div>
              <div style="border-top: 1px dotted #cccccc;height: 20px;"></div>
            </div>
          </td>
        </tr></tbody></table>
      </td>
    </tr></tbody></table>
    {% endwith %}
  </form>
  </div>
</div>
<script>
  function cycleUnitChange(cycle, unit){
    var form = layui.form;
    var weekend = $("#id_weekend").val(); //get weekend days
    var shiftManagement = $(".shift_management");
    var shift = "";
    $(".days").val("");
    if (unit === '0'){ //day
      $("#id_shift_cycle").attr("max",'366');
        if (cycle > 366) {
          alert(gettext('A daily period must not exceed 366 days.'));
          $("#id_shift_cycle").val("366");
          return;
      }
      var content = '';
      for (var i=0; i<cycle; i++){
        content += ''
          +'<div class="shift-container">'
          +' <div class="shift-name">'
          +'  <input class="chk_date" lay-filter="chk_date" value="'+i+'" timeintervals="" lay-skin="primary" type="checkbox"/>'
          +   gettext("No.")+(i+1)+gettext("day")
          +' </div>'
          +' <div class="shift-timeinterval">'
          +'  <input class="timeinterval" type="text" readonly="readonly">'
          +' </div>'
          +'  <div style="clear:both"></div> '
          +'</div>'
      };
      shift = "<td>" + content + "</td>";
      $("#id_weekend_div").hide();
    }
    if (unit === '1'){ //week
      $("#id_shift_cycle").attr("max",'52');
      if (cycle > 52) {
        alert(gettext('A weekly period must not exceed 52 weeks.'));
        $("#id_shift_cycle").val("52");
        return ;
      }
      var dict_date = [
        "{% trans 'weekday_option_sunday' %}",
        "{% trans 'weekday_option_monday' %}",
        "{% trans 'weekday_option_tuesday' %}",
        "{% trans 'weekday_option_wednesday' %}",
        "{% trans 'weekday_option_thursday' %}",
        "{% trans 'weekday_option_friday' %}",
        "{% trans 'weekday_option_saturday' %}"
      ];
      for (var c=0; c<cycle; c++){
        var content = '';
        for(var i=0; i<7; i++){
          var display = '';
          content += ''
          +'<div class="shift-container">'
          +' <div class="shift-name">'
          if(weekend.indexOf(String((6+i)%7)) != -1){
            content += ''
                +'<input class="" name="" value="'+(c*7+i)+'" type="checkbox" lay-skin="primary" disabled/>'
                +gettext(dict_date[i])
            display = "{% trans 'weekend' %}";
          }else{
            content += ''
                +'<input class="chk_date" lay-filter="chk_date" value="'+(c*7+i)+'" timeintervals="" lay-skin="primary" type="checkbox"/>'
                +gettext(dict_date[i])
          }
          content += ''
          +' </div>'
          +' <div class="shift-timeinterval">'
          +'  <input class="timeinterval" type="text" value="'+display+'" lay-ignore readonly="readonly">'
          +' </div>'
          +' <div style="clear:both"></div> '
          +'</div>'        
        }
        shift += ('<td>' + content + '</td>');
        $("#id_weekend_div").show();
      }

    }
    if (unit === '2'){ //month
      $("#id_shift_cycle").attr("max",'12');
      if (cycle > 12){
        alert(gettext('A monthly period must not exceed 12 months.'));
        $("#id_shift_cycle").val("12");
        return ;
      }
      var i=0;
      for(var j=1; j<=cycle; j++){
        var content = ''
        for(; i< j*31; i++){
          content += ''
          +'<div class="shift-container">'
          +' <div class="shift-name">'
          +'  <input class="chk_date" lay-filter="chk_date" value="'+i+'" timeintervals="" lay-skin="primary" type="checkbox"/>'
          +   gettext("No.")+(i+1)+gettext("day")
          +' </div>'
          +' <div class="shift-timeinterval">'
          +'  <input class="timeinterval" type="text" readonly="readonly">'
          +' </div>'
          +' <div style="clear:both"></div> '
          +'</div>'
        }
        shift += ("<td>" + content + "</td>");
      }
      $("#id_weekend_div").hide();
    }
    $(".shift_management").find('tbody tr').empty().append(shift);
    form.on('checkbox(chk_date)', function(data){
      var othis = data.othis;
      var day = data.value;
      var isChecked = data.elem.checked;
      var showing = othis.parent().parent().find("input[class='timeinterval']");

      if (isChecked){
        var timeintervals = [];
        var objs = [];
        $("#time-interval-div tbody input[type='checkbox']:checked").each(function(){
          var timeinterval = $(this).parent().parent().parent().find("td:eq(1)");
          var tName = timeinterval.attr('data-content');
          timeintervals.push(tName);
          objs.push(timeinterval.find("input").val());
        });
        if(timeintervals.length == 0){
          layer.alert(gettext("timetable_is_required"), {title: gettext('layer_title_error'), icon: 2, time: 3000, btn: []});
          othis.attr('checked', false); //modify
          othis.removeClass('layui-form-checked');
        }else{
          var displayName = timeintervals.join(',');
          showing.val(displayName);
          showing.attr('title', displayName);
          if(objs.length > 0){
            var ids = objs.join(',');
            var daysData = $(".days").val();
            var result =day+'-'+ids;
            if (daysData){
              $(".days").val(daysData+result+';');
            }
            else{
              $(".days").val(result+';');
            }
          }
        }

      }else{
        showing.val('');
        showing.attr('title', '');
        var daysData = $(".days").val();
        var daysRe = new RegExp(day+"-.*?;", "g");
        $(".days").val(daysData.replace(daysRe,""));
        // othis.parent().find('.result').empty();
      }
    });
    form.render();
  }

  function fillTimeIntervalList(param){
    var url = "/att/timeinterval/getTimeIntervalList/";
    var postData = new Object();
    postData['csrfmiddlewaretoken'] = $("input[name='csrfmiddlewaretoken']").val();
    if (param){
      postData['name'] = param;
    }
    $.ajax({
      type: "POST" ,
      url: url,
      data: postData,
      dataType: "json",
      success: function(returnData){
        var table = layui.table;
        table.render({
          elem: "#time-interval-list",
            // skin: 'line' //行边框风格
          even: true, //开启隔行背景
          size: 'sm', //小尺寸的表格
          height: 250,
          cellMinWidth: 80,
          page: false,
          data: returnData,
          cols: [[
            {type:'checkbox'},
            {field:'SchName', title: 'time_interval_name', width:200, sort: true, 
              templet: function(d){
                var schName = '';
                var schId = '<input type="hidden" id="id_time_interval" value='+d.SchclassID+'>'
                if (d.DayOff === 1){
                  schName = '<span style="color: blue">'+d.SchName+'</span>' ;
                  return schName + schId
                }
                if (d.DayOff === 2){
                  schName = '<span style="color: darkorange">'+d.SchName+'</span>' ;
                  return schName + schId
                }
                else{
                  schName = d.SchName;
                  return schName + schId
                }
              }
             },
            {field:'Timeinterval', width: 100, title: 'time_interval'},
          ]]
        });
       },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus+errorThrown);
      }
    });
  }

  function processShiftEdit(syncTimeInterval){
    var shiftCycle=$("#id_shift_cycle").val(); //cycle number
    var cycleUnit=$("#id_cycle_unit").val(); //cycle unit
    cycleUnitChange(shiftCycle, cycleUnit);
    if (syncTimeInterval){
      fillTimeIntervalList();
    }
  }

  function fillSelectedTimeInterval(shiftId){
    var form = layui.form;
    var postData = new Object();
    postData['csrfmiddlewaretoken'] = $("input[name='csrfmiddlewaretoken']").val();
    postData['shift_pk'] = shiftId;
    var postUrl = "/att/attshift/shiftDetails/"
    $.ajax({
      type: "POST",
      url: postUrl,
      data: postData,
      dataType: "json",
      success: function(returnData){
        var form = layui.form;
        var shiftDetails = returnData["N"];
        if (shiftDetails.length > 0){
          var shiftDetail = shiftDetails[0];
          $("#id_alias").val(shiftDetail[1]);
          $("#id_shift_cycle").val(shiftDetail[2]);
          $("#id_cycle_unit").val(shiftDetail[3]);
          if(shiftDetail[4]){
            $("#id_work_day_off").prop("checked", true);
          }else{
            $("#id_work_day_off").prop("checked", false);
          }
          $("#id_day_off_type").val(shiftDetail[5]);
          if(shiftDetail[6]){
            $("#id_work_weekend").prop("checked", true);
          }else{
            $("#id_work_weekend").prop("checked", false);
          }
          $("#id_weekend_type").val(shiftDetail[7]);
          if(shiftDetail[8]){
            $("#id_auto_shift").prop("checked", true);
          }else{
            $("#id_auto_shift").prop("checked", false);
          }
          processShiftEdit(false);
          var shiftTimeIntervals = returnData["data"];
          var tmp = {};
          for(var j in shiftTimeIntervals){
            var timeInterval = shiftTimeIntervals[j];
            var day = parseInt(timeInterval['StartTime']);
            var weekendFlag = timeInterval['id'];
            if (weekendFlag === 0)
              continue;
            if(!(day in tmp)){
              tmp[day] = {
                'ids': [],
                'alias': []
              };
            }
            tmp[day]['ids'].push(timeInterval['id']);
            tmp[day]['alias'].push(timeInterval['SchName']);
          }
          for(var key in tmp){
            $('.shift-container .shift-name .chk_date').each(function(){
              if($(this).val() === key){
                $(this).attr('checked', true);
                var showing = $(this).parent().parent().find("input[class='timeinterval']");
                if(showing.length == 0){
                  alert(gettext("Please_select_timeinterval."))
                }else{
                  var display = tmp[key]['alias'].join(',');
                  $(showing).val(display);
                  $(showing).attr('title', display);
                  var ids = tmp[key]['ids'].join(',');
                  var daysData = $(".days").val();
                  var result =key+'-'+ids;
                  if (daysData){
                    $(".days").val(daysData+result+';');
                  }
                  else{
                    $(".days").val(result+';');
                  }
                }
              }
            });
          }
        }
        form.render();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus+errorThrown);
      }
    });
  }

  $(function(){
    $("#id_query_tb").click(function(){
      var val = $("#time-interval-name").val();
      fillTimeIntervalList(val);
    });
    $("#time-interval-name").keydown(function(event){
      if(event.keyCode === 13){
        $("#id_query_tb").click();
      }
    });
    $("#id_shift_cycle").on("keyup click", function(){
      var unit = $(" #id_cycle_unit").val();

      cycleUnitChange($(this).val(), unit);
    });
    processShiftEdit(true);
    layui.use(['form', 'laydate'], function() {
      var form = layui.form;
      var laydate = layui.laydate;
      $("form.layui-form input.layui-date").each(function(){
        laydate.render({elem: this, type: 'date'});
      });
      form.on('select', function(data){
        var elem = data.elem;
        var selectValue = data.value;
        switch(elem.id){
          case 'id_shift':
            if (selectValue){
              fillSelectedTimeInterval(selectValue);
            }
            break;
          case 'id_cycle_unit':
            $("#id_shift_cycle").val('1');
            var cycle = $("#id_shift_cycle").val();
            cycleUnitChange(cycle, selectValue);
          default:
            break;
        }
        form.render();
      });
      form.render();
    });
  })
</script>
{% endautoescape %}